<template>
  <div class="app-container customer-div">
    <el-form :inline="true" :model="listQuery" size="mini" label-width="100px" style="margin-top:20px;">
      <el-form-item label="品类：">
        <el-select
          clearable
          v-model="listQuery.name">
          <el-option
            v-for="item in options2"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
        <div style="color:red;font-size:12px;">注意：选了品类下面图表才会有数据</div>
      </el-form-item>
      <el-form-item label="日期：">
        <el-date-picker
          :picker-options="pickerOptions2"
          v-model="listQuery.timeData"
          type="daterange"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item label-width="0px">
        <el-button
          @click="handleSearchList"
          type="primary">
          查询
        </el-button>
      </el-form-item>
    </el-form>

    <div id="myChart" :style="{'height':'300px'}" ></div>
    <!--数据列表-->
    <div class="table-container">
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="tableData"
        border
        style="width: 100%; margin-top: 20px">
        <el-table-column  label="日期"  align="center" min-width="100">
          <template slot-scope="scope">
            {{scope.row.day}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="品类" min-width="100">
          <template slot-scope="scope">
            {{scope.row.name}}
          </template>
        </el-table-column>
        <el-table-column label="价格" align="center" min-width="150">
          <template slot-scope="scope">
            {{scope.row.price}}
          </template>
        </el-table-column>
        <el-table-column min-width="100" label="库存" align="center">
          <template slot-scope="scope">
            {{scope.row.stock}}
          </template>
        </el-table-column>
        <el-table-column min-width="100" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="showFrom(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20,50,100]"
        :total="count">
      </el-pagination>
    </div>

    <!--修改价格-->
    <el-dialog
      title="修改"
      :visible.sync="dialogVisible"
      width="420px">
      <el-form :model="form" size="mini" label-width="120px" ref="form">
        <el-form-item label="日期：">
          {{form.day}}
        </el-form-item>
        <el-form-item label="价格：">
          <el-input v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="库存：">
          <el-input v-model="form.stock"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import {categoryList,stockPriceTrend,updateStockPrice,stockPriceList} from '@/api/product'
import {getGoodsClassList} from '@/api/partner'
import {formatDate} from '@/utils/date';
import store from '@/store'
import { mapGetters } from 'vuex'
const defaultListQuery={
  pageNum: 1,
  pageSize: 10,
  name: '',
  timeData:[],

};
const defaultForm = {
  spdId: '',
  day: '',
  price: '',
  stock:'',
}
export default {
  name: "index",
  data(){
    return {
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      tableData: [],
      count: 0,
      listLoading: false,
      roles:store.getters.roles ? store.getters.roles : [],
      dialogVisible:false,
      btnLoading:false,
      form:JSON.parse(JSON.stringify(defaultForm)),
      options2:[],
      pickerOptions2: {
        shortcuts: [{
          text: '7天',
          onClick(picker) {
            let date = new Date();
            let endTime = date.setTime(date.getTime() - 3600 * 1000 * 24);
            let endDate = formatDate(new Date(endTime), 'yyyy-MM-dd');
            let startTime = date.setTime(endTime - 3600 * 1000 * 24 * 7);
            let startDate = formatDate(new Date(startTime), 'yyyy-MM-dd')
            picker.$emit('pick', [startDate, endDate]);
          },
        },{
          text: '15天',
          onClick(picker) {
            let date = new Date();
            let endTime = date.setTime(date.getTime() - 3600 * 1000 * 24);
            let endDate = formatDate(new Date(endTime), 'yyyy-MM-dd');
            let startTime = date.setTime(endTime - 3600 * 1000 * 24 * 15);
            let startDate = formatDate(new Date(startTime), 'yyyy-MM-dd')
            picker.$emit('pick', [startDate, endDate]);
          },
        },{
          text: '30天',
          onClick(picker) {
            let date = new Date();
            let endTime = date.setTime(date.getTime() - 3600 * 1000 * 24);
            let endDate = formatDate(new Date(endTime), 'yyyy-MM-dd');
            let startTime = date.setTime(endTime - 3600 * 1000 * 24 * 30);
            let startDate = formatDate(new Date(startTime), 'yyyy-MM-dd')
            picker.$emit('pick', [startDate, endDate]);
          },
        },{
          text: '60天',
          onClick(picker) {
            let date = new Date();
            let endTime = date.setTime(date.getTime() - 3600 * 1000 * 24);
            let endDate = formatDate(new Date(endTime), 'yyyy-MM-dd');
            let startTime = date.setTime(endTime - 3600 * 1000 * 24  * 60);
            let startDate = formatDate(new Date(startTime), 'yyyy-MM-dd')
            picker.$emit('pick', [startDate, endDate]);
          },
        }]
      },

    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId',
      'isMange',
    ]),


  },
  created() {
    let date = new Date();
    let endTime = date.setTime(date.getTime() - 3600 * 1000 * 24);
    let endDate = formatDate(new Date(endTime), 'yyyy-MM-dd');
    let startTime = date.setTime(endTime - 3600 * 1000 * 24 * 7);
    let startDate = formatDate(new Date(startTime), 'yyyy-MM-dd')
    this.listQuery.timeData = [startDate,endDate];
    this.getList();
    this.getTb()
    this.remoteMethod3();
  },
  filters: {

  },
  methods:{
    //获取品类列表
    remoteMethod3() {
      categoryList().then((res)=>{
        this.options2 = res;
      }).catch(()=>{
      });
    },
    showFrom(item){
      this.form = JSON.parse(JSON.stringify(defaultForm))
      this.form.spdId = item.spdId;
      this.form.day = item.day;
      this.form.stock = item.stock;
      this.form.price = item.price;
      this.dialogVisible = true;
    },
    handleClose(){
      this.dialogVisible = false;
    },
    handleConfirm(){
      this.btnLoading = true;
      updateStockPrice(this.form).then((res)=>{
        this.btnLoading = false;
        this.handleClose();
        this.getList();
        this.getTb();
      }).catch(()=>{
        this.btnLoading = false;
      })
    },
    getTb(){
      console.log("8888888888")
      let data = JSON.parse(JSON.stringify(this.listQuery));
      delete data.pageNum
      delete data.pageSize
      stockPriceTrend(data).then((res)=>{
        this.draw1(res.x,res.y,res.y1);
      })
    },

    //画图表
    draw1(x,y,y1){
      let myChart = this.$echarts.init(document.getElementById('myChart'));
      // 绘制图表
      myChart.setOption({
        //当trigger为’item’时只会显示该点的数据，
        //为’axis’时显示该列下所有坐标轴所对应的数据。
        //提示框组件
        tooltip: {
          //触发类型
          trigger: 'axis',

        },
        legend: {
          data: ['价格','库存'],
          textStyle: {  // 统计项的样式
            color: "#595959",
            fontSize: 14
          },
          itemGap: 80
        },

        xAxis: {
          type: 'category', //category:类目轴(适用于离散无序数组)
          data: x,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#595959", //X轴文字颜色
              fontSize:8       // x轴文字大小
            },
            rotate:0,          // 倾斜角度
            align: 'center',      // x轴文字居中
            margin: 10          // 文字与x轴的间隔
          },
          axisLine: {
            lineStyle: {
              color: '#595959'  // x轴颜色
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            type: 'value',
            name: "价格",
          },
          {
            type: 'value',
            name: '库存',


          }
        ],
        series: [
          {
            name: '价格',
            type: 'line',
            data: y1,
            yAxisIndex:0,
            itemStyle: {
              normal: {
                color: '#4562ff', //改变折线点的颜色
                lineStyle: {
                  color: '#4562ff' //改变折线颜色
                }
              }
            },
          },
          {
            name: "库存",
            type: 'line',
            data: y,
            yAxisIndex:1,
            itemStyle: {
              normal: {
                color: '#9edf7f', //改变折线点的颜色
                lineStyle: {
                  color: '#9edf7f' //改变折线颜色
                }
              }
            },
            markLine: {
              silent: true,
              lineStyle: {
                normal: {
                  color: '#ff0000',                  // 设置安全基线颜色
                  type: "solid" // 实线，不写默认虚线
                }
              },
              data: [{
                yAxis: 0     //这儿定义基准线的数值为多少
              }],
              label: {
                normal: {
                  formatter: '库存0'           // 设置警戒基线
                }
              }

            }
          },

        ]
      });
    },

    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      this.getList();
    },

    handleSearchList(){
      this.listQuery.pageNum = 1;
      this.getList();
      this.getTb();
    },

    //获取订单列表
    getList() {
      this.listLoading = true;
      let listQuery = JSON.parse(JSON.stringify(this.listQuery));
      stockPriceList(listQuery).then(response => {
        this.tableData = response.list;
        this.count = response.count;
        this.listLoading = false;
      }).catch(()=>{
        this.listLoading = false;
      });
    },


  },
}
</script>

<style scoped lang="scss">

</style>
